// 简单变量
@width:100px;
@height:100px;
@margin-left:20px; // 连字符命名
@fontSize:30px; // 驼峰式命名 
@border:3px solid red; // less变量可以取任意css的合法值

.d1{
    width: @width;
    height: @height;
    border: @border;
    margin-left: @margin-left;
    font-size: @fontSize;

    background: url("@{imgPath}/2.png");
}
.d2{
    width: @width;
    height: @height;
    border: @border;
}

// 选择器变量
@sel1:a1;
#@{sel1}{
    color: red;
}
.@{sel1}{
    color: blue;
}

// URL变量
@imgPath:"../../day02/images";
p{
    background: url("@{imgPath}/1.png");
}

// 属性变量
@prop:color;
h2{
    @{prop}: red;
}
span{
    background-@{prop}: #ccc;
}

// 变量嵌套
@aaa:50px;
@bbb:aaa;
h3{
    color: blue;
    font-size: @@bbb;
}


/*
    变量的特性
*/
// 1.变量的作用域
@ccc:underline;
h1{
    color: @color;

    @bgColor:pink; // 局部变量
    background-color: @bgColor;

    text-decoration: @ccc;
    @ccc:overline;
}
span{
    color: @color;

    // background-color: @bgColor;
}
// 2.变量的懒加载
@color:red; // 全局变量


/*
    选择器的嵌套
*/ 
ul{
    background: #ff7300;
    overflow: hidden;

    li{
        list-style:none;
        float: left;
        width: 100px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        
        a{
            text-decoration: none;
            color: #fff;
        }
    }
}